<template>
  <div class="content">
    <div class="poster_type">
      <ul>
        <li :class="{ active: type == 1 }" @click="setType(1)">
          文章
          <i></i>
        </li>
        <li :class="{ active: type == 2 }" @click="setType(2)">
          海报
          <i></i>
        </li>
        <li :class="{ active: type == 3 }" @click="setType(3)">
          视频
          <i></i>
        </li>
        <li :class="{ active: type == 4 }" @click="setType(4)">
          活动
          <i></i>
        </li>
        <li :class="{ active: type == 5 }" @click="setType(5)">
          招聘
          <i></i>
        </li>
      </ul>
    </div>
    <!-- <div class="title">
      <van-nav-bar title="宣传文库" />
    </div> -->
    <div>
      <div class="search">
        <van-search
          shape="round"
          placeholder="请输入搜索关键词"
          @click="$router.push('/search')"
          @focus="$router.push('/search')"
        />
      </div>
      <!-- 文章 -->
      <div class="main" v-if="type == 1 && articleArr.length !== 0">
        <div
          class="item"
          @click="$router.push(`/detail?id=${item.id}&from=index`)"
          v-for="(item, index) in articleArr"
          :key="index"
        >
          <div class="left">
            <img :src="$publicObj.urlImg(item.cover)" />
            <img
              src="../../assets/images/task/getMoney.png"
              alt=""
              class="money"
              v-show="item.type == 9"
            />
          </div>
          <div class="right">
            <span class="title">{{ item.title }}</span>
            <span class="p">{{ item.description }}</span>
            <div class="bottom">
              <span>转发:{{ item.share }}次</span>
              <span>阅读:{{ item.yuedu || 0 }}次</span>
              <span>上传时间:{{ item.gmtCreate.substring(0, 11) }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 海报 -->
      <div class="main_two" v-else-if="type == 2 && posterArr.length !== 0">
        <div
          class="item"
          @click="$router.push(`/postDetail?id=${item.id}&from=index`)"
          v-for="item in posterArr"
          :key="item.id"
        >
          <img :src="$publicObj.urlImg(item.cover)" alt="" />
          <img
            src="../../assets/images/task/getMoney.png"
            alt=""
            class="money"
            v-show="item.type == 9"
          />
          <div class="share">
            <span>已分享：{{ item.share || 0 }}次</span>
          </div>
        </div>
      </div>
      <!-- 视频 -->
      <div class="main" v-else-if="type == 3 && videoArr.length !== 0">
        <div
          class="item"
          @click="$router.push(`/videoDetail?id=${item.id}&from=index`)"
          v-for="(item, index) in videoArr"
          :key="index"
        >
          <div class="left">
            <img :src="$publicObj.urlImg(item.cover)" />
            <img
              src="../../assets/images/task/getMoney.png"
              alt=""
              class="money"
              v-show="item.type == 9"
            />
          </div>
          <div class="right">
            <span class="title">{{ item.title }}</span>
            <span class="p">{{ item.description }}</span>
            <div class="bottom">
              <span>转发:{{ item.share || 0 }}次</span>
              <span>阅读:{{ item.yuedu || 0 }}次</span>
              <span>上传时间:{{ item.gmtCreate.substring(0, 11) }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 活动 -->
      <div class="main" v-else-if="type == 4 && activeArr.length !== 0">
        <div
          class="item"
          @click="$router.push(`/videoDetail?id=${item.id}&from=index`)"
          v-for="(item, index) in videoArr"
          :key="index"
        >
          <div class="left">
            <img :src="$publicObj.urlImg(item.cover)" />
            <img
              src="../../assets/images/task/getMoney.png"
              alt=""
              class="money"
              v-show="item.type == 9"
            />
          </div>
          <div class="right">
            <span class="title">{{ item.title }}</span>
            <span class="p">{{ item.description }}</span>
            <div class="bottom">
              <span>已分享:{{ item.share || 0 }}次</span>
              <span>上传时间:{{ item.gmtCreate }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 招聘 -->
      <div class="main" v-else-if="type == 5 && inviteArr.length !== 0">
        <div
          class="item"
          @click="$router.push(`/inviteDetail?id=${item.id}&from=index`)"
          v-for="(item, index) in inviteArr"
          :key="index"
        >
          <div class="left">
            <img :src="$publicObj.urlImg(item.cover)" />
            <img
              src="../../assets/images/task/getMoney.png"
              alt=""
              class="money"
              v-show="item.type == 9"
            />
          </div>
          <div class="right">
            <span class="title">{{ item.title }}</span>
            <span class="p">{{ item.description }}</span>
            <div class="bottom">
              <span>转发:{{ item.share || 0 }}次</span>
              <span>阅读:{{ item.share || 0 }}次</span>
              <span>上传时间:{{ item.gmtCreate.substring(0, 11) }}</span>
            </div>
          </div>
        </div>
      </div>
      <van-empty description="暂无数据" v-else />
    </div>
  </div>
</template>

<script>
import extract from "../../plugins/extract.js";
import noVisit from "../../components/noVisit.vue";
export default {
  components: {
    noVisit,
  },
  data() {
    return {
      articleArr: [], //文章列表
      posterArr: [], //海报列表
      videoArr: [], //视频列表
      activeArr: [], //活动列表
      inviteArr: [], //招聘列表
      page: 1, //当前页数,
      totalPage: "",
      agentId: "",
      wxUserInfo: {}, //微信用户个人信息
      type: 1,
      tabelType: 1,
    };
  },

  async mounted() {
    // await extract.wxShare();
    if (!JSON.parse(sessionStorage.getItem("userWxData"))) {
      await extract.wxShare();
    }
    this.wxUserInfo = JSON.parse(sessionStorage.getItem("userWxData"));
    // console.log(this.wxUserInfo);

    if (this.$route.query.account) {
      sessionStorage.setItem("agentId", this.$route.query.account);
    }
    this.agentId = sessionStorage.getItem("agentId");
    if (this.$route.query.type == 3) {
      this.type = 3;
      this.getVideoList();
      return;
    } else if (this.$route.query.type == 2) {
      this.type = 2;
      this.getPosterList();
      return;
    } else if (this.$route.query.type == 1) {
      this.type = 1;
      this.getArticle();
    } else if (this.$route.query.type == 5) {
      this.type = 5;
      this.getRecruit();
    }
    this.getArticle();
    // 获取个人信息
    this.$store.dispatch("updateUserInfo");
  },

  methods: {
    // 切换
    setType(n) {
      if (n == 1) {
        this.getArticle();
      } else if (n == 2) {
        this.getPosterList();
      } else if (n == 3) {
        this.getVideoList();
      } else if (n == 5) {
        this.getRecruit();
      }
      this.type = n;
    },
    //获取招聘列表
    async getRecruit() {
      let res = await this.$api.getRecruit({
        agentId: this.agentId,
        title: "",
      });
      if (res.code != 0) return;
      this.inviteArr = res.data.list;
    },
    //获取视频列表
    async getVideoList() {
      let res = await this.$api.getVideoList({
        limit: 10000000,
        page: 1,
        // type: 8,
        agentId: this.agentId,
        tabelType: 4,
        sortType: "", //排序
        // sort: 0,
      });
      if (res.code != 0) return;
      this.videoArr = res.data.list;
    },
    //获取海报列表
    async getPosterList() {
      let res = await this.$api.getPosterList({
        limit: 10000000,
        page: 1,
        // type: 8,
        agentId: this.agentId,
        tabelType: 3,
        sortType: null, //排序
        // sort: 0,
      });
      if (res.code != 0) return;
      this.posterArr = res.data.list;
    },
    //获取文章列表
    async getArticle() {
      let obj = {
        page: 1,
        limit: 10000000,
        // type: 8,
        userId: this.agentId,
        openId: this.wxUserInfo.openid,
        name: this.wxUserInfo.nickname,
        image: this.wxUserInfo.headimgurl,
        sex: this.wxUserInfo.sex,
        city: this.wxUserInfo.city,
        province: this.wxUserInfo.province,
        tabelType: 1,
        sortType: null, //排序
        // sort: 0,
        account: sessionStorage.getItem("agentId"),
      };

      let res = await this.$api.getArticleArr(obj);

      if (res.code != 0) return;
      if (res.status == 0) {
        this.$router.push("/default");
        return;
      }
      this.articleArr = res.page.list;
      sessionStorage.setItem("agentIds", res.agentId);
      this.totalPage = res.page.totalPage;
    },
  },
};
</script>

<style scoped lang="less">
.poster_type {
  padding: 0 30px;
  background-color: #fff;
  ul {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    li {
      font-size: 16px;
      color: #666;
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      position: relative;
      align-items: center;
      padding: 5px 0;
      i {
        width: 28px;
        height: 3px;

        border-radius: 3px;
        position: absolute;
        bottom: 0;
      }
    }
    .active {
      font-weight: 700;
      color: #000;
      i {
        background-color: #0264d1;
      }
    }
  }
}
.content {
  padding: 15px 15px 0;

  .main {
    height: calc(100vh - 150px);
    overflow-y: scroll;
    .item {
      display: flex;
      margin-top: 12px;
      .left {
        flex: 1;
        width: 90px;
        height: 90px;
        margin-right: 15px;
        position: relative;
        img {
          width: 90px;
          height: 90px;
          border-radius: 5px;
        }
        .money {
          width: 35px;
          height: 35px;
          position: absolute;
          right: 0;
          top: 0;
          border-radius: none;
        }
      }
      .right {
        flex: 3;
        span {
          font-size: 11px;
          color: #999999;
        }
        .title {
          display: block;
          font-size: 14px;
          color: #333333;
        }
        .p {
          margin-top: 3px;
          height: 30px;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
        }
        .bottom {
          width: 246px;
          margin-top: 8px;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .main_two {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: calc(100vh - 150px);
    overflow-y: scroll;
    .item {
      margin-top: 14px;
      width: 48%;
      height: 165px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
      .money {
        width: 35px;
        height: 35px;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: none;
      }
      .share {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 30px;
        width: 100%;
        background-color: rgba(90, 90, 90, 0.5);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        span {
          margin-right: 10px;
          font-size: 10px;
          color: #f3f5f7;
        }
      }
    }
  }
}
</style>
